<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>监视属性</title>
    <script src="../js/vue.js"></script>
</head>
<body>

<div id="root">

    <span>天气很{{info}}</span>
    <br/>
    <button @click="isHot = !isHot">切换天气</button>
    <hr/>
    <span>a的值使{{numbers.a}}</span>
    <br/>
    <button @click="numbers.a++">点我使a+1</button>
    <hr/>
    <span>a的值使{{numbers.b}}</span>
    <br/>
    <button @click="numbers.b++">点我使b+1</button>
    <button @click="numbers={a:999,b:666}">彻底替换numbers</button>


</div>
<script type="text/javascript">
    Vue.config.printWarnings = false;
    const vm = new Vue({
        el: '#root',
        data: {
            isHot: true,
            numbers:{
                a:1,
                b:2
            }
        },
        methods: {
            change() {
                this.isHot = !this.isHot;
            }
        },
        // 计算属性的定义
        //
        computed: {
            info() {
                return this.isHot ? '炎热' : '凉爽';
            }

        },
        watch: {
            //监视属性
            //监视属性的基本使用：
            // 1.语法： watch: {属性名: function(newVal, oldVal) {}}
            // 2.监视属性的特点：
            //    1.监视属性必须是data中的属性
            //    2.监视属性的值发生变化时，会触发监视属性的回调函数
            // isHot:{
            //     //监视属性的回调函数
            //     handler(newVal, oldVal) {
            //         console.log(newVal, oldVal);
            //     },
            //     //立即执行
            //     immediate:true,
            //     deep:true
            // },
            //简写
            isHot(newVal, oldVal) {
                console.log(newVal, oldVal);
            },
            info:{
                handler(newVal, oldVal) {
                    console.log(newVal, oldVal);
                }
            },
            'numbers.a':{
                handler(newVal, oldVal) {
                    console.log(newVal, oldVal);
                },
            },
            numbers: {
                handler(newVal, oldVal) {

                    console.log("numbers发生变化");
                },
                //默认不监视numbers的属性
                //需要设置deep为true 开启监视对象的属性
                //当a或者b发生变化时，会触发监视属性的回调函数
                deep:true
            }

        }
    });
    // 监视属性的第二种写法
    vm.$watch('isHot',function (newVal, oldVal) {
        console.log(newVal, oldVal);
    })
</script>
</body>

</html>